<template>
  <div class="ring_outer">
    <div class="ring_middle">
      <ul>
        <li v-for="num in pointCount" :key="num" :ref="getRefs"></li>
      </ul>
      <div class="ring_inner"></div>
    </div>
  </div>
</template>

<script setup>
// 圆点数量
const pointCount = 30;
// 初始节点角度
let angle = 0;
// 等分角度
let averageAngle = 360/pointCount;

/**
 * 设置圆点节点旋转角度
 * @param {HTMLElement} el li节点
 */
const getRefs = (el) => {
  el.style.transform = `rotate(${angle}deg)`;
  angle += averageAngle;
}

</script>

<style scoped>
.ring_outer,
.ring_middle,
.ring_inner {
  border-radius: 50%;
}
.ring_outer {
  border: 1px solid rgba(33, 169, 248, 0.15);
  width: calc(92vh + 0.75rem);
  height: calc(92vh + 0.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

.ring_middle {
  border: 3px solid rgba(33, 169, 248, 0.2);
  width: 92vh;
  height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rotateC 20s linear infinite;
}

.ring_inner {
  position: absolute;
  border: 1px solid rgba(33, 169, 248, 0.15);
  width: calc(92vh - 0.75rem - 4px);
  height: calc(92vh - 0.75rem - 4px);
}

ul,li {
  background: transparent;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul {
  width: calc(92vh + 0.75rem);
  height: calc(92vh + 0.75rem);
  border-radius: 50%;
  position: relative;

}

li {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  background:  url(../../assets/images/guide/light.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin:0 calc(46vh + 0.375rem);
}

@keyframes rotateC {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>